<template>
  <view>
    <view class="actconBoxList">
      <block v-for="(value, index) in teamlist" :key="index">
        <view class="actContent">
          <ActivityCell :item="value"></ActivityCell>
          <!-- <view class="btnBox">
                <view class="btn_" @click.stop="auditItem(value,-1,index)">
                    拒绝
                </view>
                <view class="btn_ btn_soild" @click.stop="auditItem(value,0,index)">
                    同意
                </view>
            </view> -->
          <view>
            <view class="btnBox" v-if="value.Status == -99 || value.Status == 0">
              <view class="revStatus">活动状态：{{ statusType[value.Status] }}</view>
              <view class="btn_" @click.stop="auditItem(value, -2, index, '拒绝')">
                拒绝
              </view>
              <view class="btn_ btn_soild" @click.stop="auditItem(value, 1, index, '同意')">
                同意
              </view>
            </view>
            <view class="btnBox" v-else>
              <view class="revStatus">活动状态：{{ statusType[value.Status] }}</view>
              <view class="btn_" @click.stop="auditItem(value, 1, index, '启用')" v-if="value.Status == -2">
                启用
              </view>
              <view class="btn_ btn_No_soild" @click.stop="auditItem(value, -2, index, '禁用')" v-if="value.Status == 1">
                禁用
              </view>
            </view>
          </view>
        </view>


      </block>
    </view>

    <uni-popup type="center" ref="cirishBox">
      <view class="cirPop">
        <view class="group_textarea">
          <view class="dectitle">拒绝理由</view>
          <textarea style="width: 100%;height: 54%; font-weight: 400;" :value="auditRemark"
            placeholder="请填写拒绝理由，不写则默认为：很抱歉您的活动不符合挥友圈相关规定。" placeholder-class="remtext" maxlength="1000"
            @input="inputrem" />
        </view>
        <view class="subBtn" @click="refuseCir()">确定</view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import ActivityCell from "./components/ActivityCell/ActivityCell.vue";
export default {
  components: {
    ActivityCell
  },
  data() {
    return {
      isMore: true,
      PageIndex: 1,
      PageSize: 10,
      longitude: '',
      latitude: '',
      searchContent: '',
      teamlist: [],
      auditRemark: '',
      nowInfo: {},
      statusType: {
        '-99': '待审核',
        1: '已通过',
        0: '待审核',
        '-2': '已禁用',
        '3': '已结束',
        // '-99': '已禁用',
      }
    };
  },
  onLoad() {
    this.getActList()
  },
  // 触底事件
  onReachBottom() {
    if (this.isMore) {
      this.PageIndex++
      this.getActList()
    }
  },
  methods: {
    async apiSignComfirm(id, status, index) {
      let remak = status == 0 ? '' : (this.auditRemark || '很抱歉您的活动不符合挥友圈相关规定')
      this.$api.post('Appointment/Audit', {
        ID: id,
        Status: status,
        AuditRemark: remak
      }).then(res => {
        const { code, data, message } = res
        if (code == 0) {
          // this.teamlist.splice(index, 1)
          this.teamlist[index].Status = status
          this.$pv.msg('操作成功');
          this.nowInfo = {
            id: 0,
            index: 0,
          }
          this.$refs.cirishBox.close()
        } else {
          this.$pv.msg(message);
        }

      });

    },
    // 填写原因拒绝审核
    refuseCir() {
      this.apiSignComfirm(this.nowInfo.id, -2, this.nowInfo.index)
    },
    inputrem(e) {
      const { value, cursor } = e.detail
      let str = this.$util.entitiesToUtf16(value)
      if (str.length > 100) {
        this.auditRemark = str.slice(0, 100)
      } else {
        this.auditRemark = str
      }
    },
    async auditItem(item, status, index, text) {
      if (status == -2) {
        this.auditRemark = ''
        this.$refs.cirishBox.open()
        this.nowInfo = {
          id: item.ID,
          index: index
        }
        return
      }
      let _this = this;
      let content = `确定要${text}该活动吗？`
      uni.showModal({
        title: '温馨提示',
        content: content,
        confirmText: text,
        success: async function (rs) {
          if (rs.confirm) {
            _this.apiSignComfirm(item.ID, status, index)
          } else if (rs.cancel) {
          }
        }
      });
    },
    // 获取列表
    async getActList() {
      let res = await this.$api.post("Appointment/AuditList", {
        PageIndex: this.PageIndex,
        PageSize: this.PageSize
      })
      if (res.code == 0) {
        if (this.PageIndex == 1) {
          this.teamlist = res.data
        } else {
          this.teamlist = this.teamlist.concat(res.data)
        }
        console.log(this.teamlist);

        this.isMore =
          Array.isArray(res.data) && res.data.length >= this.PageSize;
      }

    },

  },

}
</script>
<style lang='scss'>
.actconBoxList {
  width: 100%;
  padding: 40rpx 20rpx;
  //   margin-top: 200rpx;
  background: #E4E4E4;
  .actContent{
    border-radius: 16rpx;
    background-color: white;
    padding-bottom: 24rpx;
    box-sizing: border-box;
    margin-bottom: 30rpx;
  }
}

.btnBox {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  z-index: 10;
  margin: 30rpx 0;
  margin-top: 14rpx;

  .btn_ {
    margin-right: 24rpx;
    font-size: 20rpx;
    color: #333333;
    padding: 20rpx 48rpx;
    border-radius: 50rpx;
    border: 2rpx solid #E4E4E4;
    min-width: 100rpx;
  }

  .btn_soild {
    color: #fff;
    background: #706EEE;
    border: 2rpx solid #706EEE;
  }

  .btn_No_soild {
    background: #FC4F45;
    border: 2rpx solid #FC4F45;
    color: white;
  }

  .revStatus {
    font-size: 28rpx;
    font-weight: bold;
    color: #333333;
    margin-right: auto;
    padding-left: 24rpx;
  }
}

.cirPop {
  width: 644rpx;
  max-height: 1030rpx;
  background-color: #FFFFFF;
  overflow: auto;
  border-radius: 54rpx;
  padding: 40rpx;

  .group_textarea {
    height: 264rpx;
    margin-top: 30rpx;
    // background-color: #fff;
    // padding-left: 32rpx;
    // text-indent: 2em;
    box-sizing: border-box;
    position: relative;

    .remtext {
      font-size: 28rpx !important;
      color: #C2C2C2 !important;
      font-weight: 400 !important;
    }

    .dectitle {
      margin-bottom: 25rpx;
    }

    .count {
      position: absolute;
      bottom: 15rpx;
      right: 15rpx;
      font-size: 24rpx;
      color: #C2C2C2;
    }

    /deep/ .u-textarea {
      background: none !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
      border-bottom: none !important;
      padding: 0 !important;
      height: 100% !important;
      text-indent: 2em;
    }

    /deep/ .u-textarea__count {
      background: none !important;
      color: #0d0d0d !important;
    }

    /deep/ .u-textarea__field {
      color: #0d0d0d !important;
      font-size: 28rpx !important;
      height: 100% !important;
    }
  }

  .subBtn {
    margin: 20rpx auto;
    font-size: 20rpx;
    color: #fff;
    padding: 20rpx 48rpx;
    border-radius: 50rpx;
    min-width: 100rpx;
    background: #706EEE;
    border: 2rpx solid #706EEE;
    text-align: center;

  }
}
</style>